<template>
	<div class="max" style="background: rgb(245, 245, 245);">
		<my-header v-if="access!=='kinsfolk'" :backBtn="true">
			<div slot="title">
				校园动态
			</div>
			<div slot="right">
				<router-link to="/addDaily">
					<img src="../../../static/img/icon.png" alt="" width="20px" class="icon">
					<span style="font-size: 1.1rem;">发布</span>
				</router-link>
			</div>
		</my-header>
		<my-header v-else></my-header>
		<div class="cont-nof" :class="{'cont':access=='kinsfolk'}">
			<mescroll-vue ref="mescroll" :up="mescrollUp" @init="mescrollInit">
				<!--内容...-->
				<div id="dataList">
					<div class="daily" v-for="(item,index) in list">
						<div class="oh up-top">
							<div class="up-avatar oh fl">
								<img :src="item.avatar" width="100%" height="100%">
							</div>
							<div class="up-name fl">
								{{item.publisherName}}
							</div>
							<div class="up-time fr">
								{{item.createTime}}
								<!-- {{item.createTime}} -->
							</div>
						</div>
						<div class="up-cont tl padding-15" v-html="item.content"></div>
						<div class="up-img tl oh flex padding-15" :class="'up-img-' + item.trendsFiles.length">
							<div v-for="img in item.trendsFiles" class="oh fl" @click="previewImage(img.url)" :style="'background:url(' + img.url + ')no-repeat top center/cover'"></div>
						</div>
						<div class="up-handle padding-15 flex">
							<div @click="handlePraiseFn(item)" v-if="custom==='false'">
								<img class="icon" src="../../../static/img/like_1.png" v-if="!item.selfPraise" height="18px">
								<img class="icon" src="../../../static/img/like_2.png" v-else height="18px">
								<span v-if="item.praiseNumber>0">{{item.praiseNumber}}</span>
							</div>
							<div @click="toShare(item)">
								<img class="icon" src="../../../static/img/forward.png" height="18px">
								<span v-if="item.shareNumber>0">{{item.shareNumber}}</span>
							</div>
							<div @click="deleteTrends(item.id)" v-if="access!=='kinsfolk'&&item.canDelete">
								<img class="icon" src="../../../static/img/del.png" height="18px">
							</div>
							<div @click="converFn(item)" v-if="access==='kindergarten'">
								<img class="icon" src="../../../static/img/notice_a.png" v-if="!item.black" height="18px">
								<img class="icon" src="../../../static/img/hide.png" v-else height="18px">
							</div>
						</div>
						<div class="up-like oh padding-15" v-if="item.praises.length>0">
							<div class="fl">
								<img style="vertical-align: top;" src="../../../static/img/like_2.png" alt="" height="18px">
							</div>
							<div class="fr tl up-like-p">
								{{item.praises.map(praise=>praise.praiseName).join(",")}}
							</div>
						</div>
					</div>
				</div>
			</mescroll-vue>
		</div>
		<div class="weui-mask" v-if="blockTips">
			<div class="weui-dialog">
				<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
				<div class="weui-dialog__bd">您确定要屏蔽此条动态吗？</div>
				<div class="weui-dialog__ft">
					<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
					<a href="javascript:" class="weui-dialog__btn weui-dialog__btn_default" @click="blockTips=false">取消</a>
				</div>
			</div>
		</div>
		<my-foot tab="/classDaily" v-if="access==='kinsfolk'"></my-foot>
		<div class="weui-mask share" v-if="share" @click="share=false">
			<div class="share_txt">
				点击右上角分享
			</div>
		</div>
	</div>
</template>

<script>
	import mySelect from '@/components/select.vue'
	import myFoot from '@/components/Footer.vue'
	import MescrollVue from 'mescroll.js/mescroll.vue'
	import wx from "weixin-js-sdk";

	export default {
		components: {
			myFoot,
			mySelect,
			MescrollVue
		},
		data() {
			return {
				share: false,
				custom: this.$Cookies.get('custom'),
				blockTips: false,
				params: {
					current: 1,
					size: 10,
					pages: 0
				},
				num: 2,
				access: '',
				option: {
					value: '+',
					type: 'picker',
					data: [{
						label: '视频',
						value: 'video'
					}, {
						label: '图片',
						value: 'image'
					}],
					style: {
						background: 'none',
						fontSize: '8rem',
						color: '#A3A3A3',
					}
				},
				showFootHandle: false,
				isSelectAll: false,
				isSelectNum: 0,
				list: [],
				mescroll: null, // mescroll实例对象
				mescrollUp: {
					callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量
					},
					empty: {
						// 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才生效;
						warpId: 'dataList', // 父布局的id;
						tip: '暂无相关数据~', // 提示
					},
					noMoreSize: 2, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
					lazyLoad: {
						use: true // 是否开启懒加载,默认false
					}
				},
			}
		},
		methods: {
			toShare(trends) {
			  console.log(trends.content)
        this.share = true;
        wx.ready(function() { //需在用户可能点击分享按钮前就先调用
          wx.updateTimelineShareData({
            title: "校园动态分享", // 分享标题
            link:"http://"+ window.location.host+"/wechat/share-trends?id="+trends.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: trends.avatar,
            success: function(resp) {
              // 设置成功
              console.log(resp)
            },
            fail:function (re) {
              console.log(re)
            }
          })
        });
			},
			previewImage(url) {
				wx.previewImage({
					previewImage: url,
					urls: [url]
				})
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
			},
			// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
			upCallback(page, mescroll) {
				this.$http.fetchTrendy({
					current: page.num,
					size: page.size,
				}).then(resp => {
					if (page.num === 1) this.list = []; // 如果是第一页需手动置空列表
					this.list = this.list.concat(resp.data.records); // 把请求到的数据添加到列表
					let hasNext = resp.data.current == resp.data.pages ? false : true; //判断是否还有下一页
					if (this.custom) hasNext = false;
					this.$nextTick(() => { // 数据渲染成功后,隐藏下拉刷新的状态；
						mescroll.endSuccess(this.list.length, hasNext);
					})
				}).catch(error => {
					mescroll.endErr()
				})
			},


			handle(val) {
				if (val == 2) {
					wx.ready(function() {
						wx.onMenuShareTimeline({
							title: '', // 分享标题
							link: '', // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 用户确认分享后执行的回调函数
							},
							cancel: function() {
								// 用户取消分享后执行的回调函数
							}
						});
						wx.error(function(res) {
							// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
							alert("errorMSG:" + res);
						});
					})
				}
				if (val == 4) this.blockTips = true;
			},
			change(item) {
				this.$router.push({
					path: '/addDaily',
					query: item[0]
				})
			},
			selectAll() { //全选
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = !this.isSelectAll;
				}!this.isSelectAll ? this.isSelectNum = this.list.length : this.isSelectNum = 0;
			},
			selectItem(item) { //单选
				item.isSelect = !item.isSelect;
				item.isSelect ? this.isSelectNum++ : this.isSelectNum--
				this.isSelectNum === this.list.length ? this.isSelectAll = true : this.isSelectAll = false;
			},
			hideFoot() { //取消
				this.showFootHandle = false;
				this.isSelectAll = false;
				this.isSelectNum = 0;
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isSelect = false;
				}
			},
			handlePraiseFn(item) {
				this.$http.handlePraiseFn(item).then(resp => {
					this.queryFn();
				})
			},
			deleteTrends(id) {
				this.$toast.show('删除...', 'loading')
				this.$http.deleteTrendy({
					id: id
				}).then(resp => {
					this.$toast.hide();
					this.queryFn();
				})
			},
			converFn(data) {
				this.$http.converTrendy(data).then(resp => {
					let black = data.black;
					if (black) {
						data.black = false;
					} else {
						data.black = true;
					}
				})
			},
			jump(item) {
				if (item.type === 'video') {
					this.$router.push({
						path: '/dailyContent',
						query: item
					})
				} else {
					let urls = item.fileList.map(file => file.url);
					wx.previewImage({
						previewImage: urls[0],
						urls: urls
					})
				}
			},
			queryFn() {
				this.$http.fetchTrendy(this.params).then(resp => {
					let data = resp.data;
					this.params.current = data.current;
					this.params.size = data.size;
					this.params.pages = data.pages;
					this.list = data.records;
				}).catch(error => {
					console.log(error)
				})
			},
			getWxConfig() {
				let url = window.location.href;
				let _this = this;
				_this.$http.fetchWxConfig({
					url: url
				}).then(resp => {
					wx.config({
						// debug: true,
						appId: resp.data.appId,
						timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
						nonceStr: resp.data.noncestr, // 必填，生成签名的随机串
						signature: resp.data.sign, // 必填，签名
						jsApiList: ['updateTimelineShareData'] // 必填，需要使用的JS接口列表
					});
				})
			},
		},
		mounted() {
			this.queryFn();
			this.mescroll.resetUpScroll();
			this.getWxConfig();
		},
		created() {
			this.access = this.$Cookies.get('loginType');
		}
	}
</script>

<style scoped>
	.mescroll {
		position: fixed;
		top: 44px;
		bottom: 0;
		height: auto;
	}

	.daily {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: 1.5rem;
		display: inline-block;
	}

	.padding-15 {
		padding: 0 1.5rem;
		box-sizing: border-box;
	}

	.up-top {
		width: 100%;
		padding: 1.5rem 1.5rem 0 1.5rem;
		box-sizing: border-box;
	}

	.up-avatar,
	.up-name,
	.up-time {
		height: 4rem;
		line-height: 4rem;
	}

	.up-avatar {
		width: 4rem;
		border-radius: 50%;
		background: #e5e5e5;
		margin-right: 1rem;
	}

	.up-name {
		font-size: 1.6rem;
		color: rgba(0, 0, 0, 1);
	}

	.up-time {
		font-size: 1rem;
		color: rgba(98, 98, 98, 1);
	}

	.up-cont {
		margin: 1rem 0;
		font-size: 1.4rem;
		line-height: 2rem;
	}

	.up-img {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.up-img::after {
		content: '';
		width: 31%;
	}

	.up-img div {
		background: #e5e5e5;
		box-sizing: border-box;
		height: 12rem;
		margin-bottom: 1rem;
	}

	.up-img-1 div,
	.up-img-2 div,
	.up-img-4 div {
		width: 49%;
	}

	.up-img-3 div,
	.up-img-5 div,
	.up-img-6 div,
	.up-img-7 div,
	.up-img-8 div,
	.up-img-9 div {
		width: 31%;
	}

	.up-handle {
		justify-content: flex-end;
		margin-bottom: 1rem;
	}

	.icon {
		vertical-align: middle;
	}

	.up-handle>div {
		margin-left: 2rem;
	}

	.up-like,
	.up-like>div {
		position: relative;
		margin-top: 1rem;
	}

	.up-like::before {
		content: "";
		position: absolute;
		left: -1.5rem;
		width: calc(100% + 3rem);
		height: 1px;
		background: rgba(238, 238, 238, 1);
	}

	.up-like-p {
		width: calc(100% - 2.5rem);
		min-height: 2.2rem;
		color: #36C12D;
		font-size: 1.2rem;
		line-height: 1.8rem;
		margin-bottom: 1rem;
	}
</style>
